/**
 * 热烈庆祝码云恢复Gitee Page服务, 专门挤出一点时间写了这么个玩意
 * 让你可以更方便的制作实名认证界面
 * @author FuZhu_Me
 * @home https://gitee.com/fuzhu_me
 * @blog https://tiankengba.com/
 * @verion 1.0.0.20210814
 */
layui.define(["jquery", "layer"], function (exports) {
    var layer = layui.layer;
    var $ = layui.$;
    var name = "idCardUpload";

    layui.link(layui.cache.base + name + "/css/theme.css");
    layui.link(layui.cache.base + name + "/font/iconfont.css");

    function Plugin() {}

    Plugin.prototype.classPrefix = "idcard-upload";

    /**
     * 创建classlist
     * @param {*} name
     * @returns
     */
    Plugin.prototype.createClassList = function (name) {
        return [this.classPrefix, name].join("-");
    };

    /**
     * 激活事件
     * @param {*} opt 配置
     * @param {*} path 路径
     * @param {*} arg1 参数1
     * @param {*} arg2 参数2
     * @returns
     */
    Plugin.prototype.activeEvent = function (opt, path, arg1, arg2, arg3) {
        if (typeof opt.event != "undefined") {
            if (typeof opt.event[path] === "function") {
                var next = opt.event[path](arg1, arg2, arg3);
                if (next === false) return false;
                return true;
            }
            return true;
        } else {
            return true;
        }
    };

    /**
     * 加载图片, 工具方法
     * @param {*} file 文件
     * @param {*} successCallback 成功回调
     * @param {*} errorCallback 失败回调
     */
    Plugin.prototype.loadImage = function (file, successCallback, errorCallback) {
        var fr = new FileReader();
        fr.readAsDataURL(file);
        fr.addEventListener("load", successCallback);
        fr.addEventListener("error", errorCallback);
    };

    /**
     * 加载图片的 Promise 版本, 工具方法
     * 如果不考虑兼容性的话可以使用 Promise 版本
     * 理论上可以让代码上看去更优美
     * @param {*} file 文件
     * @returns
     */
    Plugin.prototype.loadImagePromise = function (file) {
        var _this = this;
        return new Promise(function (resolve, reject) {
            _this.loadImage(file, resolve, reject);
        });
    };

    /**
     * 渲染函数, 主函数
     * @param {*} elem 名称
     * @param {*} opt 配置
     */
    Plugin.prototype.render = function (elem, opt) {
        if (!opt) opt = {};
        if (!opt.theme) opt.theme = "default";
        if (opt.autoUpdate == undefined) opt.autoUpdate = true;

        // 实例
        var _this = this;

        // 输入框容器
        var $els = $(elem);

        $(elem).each(function () {
            // 当插件开始运行
            var next = _this.activeEvent(opt, "created");
            if (!next) return;

            // 输入框
            var $input = $(this);
            $input.hide();

            // 布局容器
            var $container = $("<div>").addClass(_this.createClassList("container")).addClass(_this.createClassList(opt.theme));

            // 上传输入框
            var $selectFileInput = $("<input>");

            var $selectContainer = $("<div>").addClass(_this.createClassList("select-file"));
            var $selectContainerCenter = $("<div>").addClass(_this.createClassList("select-file-center"));
            var $selectContainericon = $("<i>").addClass(_this.createClassList("icon"));
            var $previeContainertext = $("<div>").addClass(_this.createClassList("text"));

            var $previeContainer = $("<div>").addClass(_this.createClassList("image-preview"));
            var $previeContainerimg = $("<img>").addClass(_this.createClassList("image"));
            var $previeContainerlayer = $("<div>").addClass(_this.createClassList("layer")).text("更换图片");

            // 重新选择
            $previeContainerlayer.click(function () {
                $previeContainerimg.attr("src", "");
                $previeContainer.hide();
                $selectContainer.show();
                if (opt.autoUpdate) $input.val("");
            });

            // 数据模型
            var model = {
                selectFileInput: $selectFileInput,
                selectContainer: $selectContainer,
                previeContainer: $previeContainer,
                container: $container,
                elem: elem,
                opt: opt,
            };

            $selectFileInput
                .addClass(_this.createClassList("select-file-input"))
                .attr({
                    type: "file",
                    accept: "image/*",
                })
                .hide()
                .change(function (e) {
                    var elem = e.srcElement || e.target;

                    var files = elem.files;

                    if (files.length > 0) {
                        var file = files[0];

                        function render(url) {
                            $input.val(url);
                            $previeContainerimg.attr("src", url);
                            $previeContainer.show();
                            $selectContainer.hide();
                        }

                        if (_this.activeEvent(opt, "selectedFile", model, file, render)) {
                            _this.loadImage(file, loadImageSuccess, loadImageError);

                            function loadImageSuccess(e) {
                                var base64 = e.target.result;
                                if (opt.autoUpdate) $input.val(base64);
                                $previeContainerimg.attr("src", base64);
                                $previeContainer.show();
                                $selectContainer.hide();
                            }

                            function loadImageError(err) {
                                layer.msg("图片加载失败!", { icon: 2 });
                            }
                        }

                        elem.value = "";
                    }
                });

            // 默认显示
            switch (opt.type) {
                case "zhengmian":
                    $selectContainericon.addClass("iconfont icon-shenfenzhengzhengmian");
                    $previeContainertext.text("身份证正面(人像面)");
                    break;
                case "fanmian":
                    $selectContainericon.addClass("iconfont icon-shenfenzhengfanmian");
                    $previeContainertext.text("身份证反面(国徽面)");
                    break;
                case "shouchi":
                    $selectContainericon.addClass("iconfont icon-shouchishenfenzheng");
                    $previeContainertext.text("手持身份证照片");
                    break;
            }

            $selectContainerCenter
                .append($selectContainericon)
                .append($previeContainertext)
                .click(function (e) {
                    if (_this.activeEvent(opt, "clickselectContainer", model)) $selectFileInput.click();
                });

            $selectContainer.append($selectContainerCenter);

            $previeContainer.append($previeContainerimg).append($previeContainerlayer);

            // 创建布局
            $container.append($selectFileInput).append($selectContainer).append($previeContainer);

            $input.parent().append($container);

            _this.activeEvent(opt, "mounted", model);
        });
    };

    /**
     * 简易方法,身份证正面
     * @param {*} elem Dom
     * @param {*} opt 配置
     */
    Plugin.prototype.zhengmian = function (elem, opt) {
        if (!opt) opt = {};
        opt.type = "zhengmian";
        this.render(elem, opt);
    };

    /**
     * 简易方法,身份证反面
     * @param {*} elem Dom
     * @param {*} opt 配置
     */
    Plugin.prototype.fanmian = function (elem, opt) {
        if (!opt) opt = {};
        opt.type = "fanmian";
        this.render(elem, opt);
    };

    /**
     * 简易方法,手持身份证
     * @param {*} elem Dom
     * @param {*} opt 配置
     */
    Plugin.prototype.shouchi = function (elem, opt) {
        if (!opt) opt = {};
        opt.type = "shouchi";
        this.render(elem, opt);
    };

    // 导出配置
    exports(name, new Plugin());
});
